import {Button, Form, Input, Modal} from 'antd';
import React, {Component} from 'react';

import {FormComponentProps} from 'antd/es/form';
import {TableListItem} from '../data.d';

export interface FormValueType extends Partial<TableListItem> {
  target?: string;
  template?: string;
  type?: string;
  time?: string;
  frequency?: string;
}

export interface UpdateFormProps extends FormComponentProps {
  onCancel: (flag?: boolean, formVals?: FormValueType) => void;
  onSubmit: (values: FormValueType) => void;
  updateModalVisible: boolean;
  values: Partial<TableListItem>;
}

const FormItem = Form.Item;

export interface UpdateFormState {
  formVals: FormValueType;
}

class UpdateForm extends Component<UpdateFormProps, UpdateFormState> {
  formRef = React.createRef();

  constructor(props: UpdateFormProps) {
    super(props);
    this.state = {
      propsItem: {
        id: props.values.id,
        name: props.values.name,
      }
    };

  }
  static defaultProps = {
    handleUpdate: () => {
    },
    handleUpdateModalVisible: () => {
    },
    values: {},
  };

  formLayout = {
    labelCol: {span: 7},
    wrapperCol: {span: 13},
  };

  handleNext = () => {
    const {onSubmit: handleUpdate} = this.props;
    let {validateFields} =  this.formRef.current;
    validateFields().then(values=>{
      console.log(values);
      handleUpdate(values);
    })
  };

  renderFooter = () => {
    const {onCancel: handleUpdateModalVisible, values} = this.props;
    return [
      <Button key="cancel" onClick={() => handleUpdateModalVisible(false, values)}>
        取消
      </Button>,
      <Button key="forward" type="primary" onClick={() => this.handleNext()}>
        完成
      </Button>,
    ];
  };

  render() {
    const {updateModalVisible, onCancel: handleUpdateModalVisible, values} = this.props;
    // const {formVals} = this.state;
    const {form} = this.props;
    return (
      <Modal
        width={640}
        bodyStyle={{padding: '32px 40px 48px'}}
        destroyOnClose
        title="班级修改"
        visible={updateModalVisible}
        footer={this.renderFooter()}
        onCancel={() => handleUpdateModalVisible(false, values)}
        afterClose={() => handleUpdateModalVisible()}
      >
        <Form
          ref={this.formRef}
          initialValues={this.state.propsItem}>
          <FormItem key="id"
                    {...this.formLayout}
                    name="id"
          >
            <Input placeholder="请输入" hidden/>
          </FormItem>
          <FormItem key="name" {...this.formLayout} label="班级名称"
             name="name"
                    rules={[{ required: true, message: '请输入班级！'}]}>
            <Input placeholder="请输入"/>
          </FormItem>
        </Form>
      </Modal>
    );
  }
}

export default UpdateForm;
